<template>
    <router-view :key="notNeedKey ? 'key' : route.fullPath" v-slot="{ Component }">
        <transition v-if="animate" name="zoom-fade" mode="out-in" appear>
            <component :is="Component"></component>
        </transition>
        <component v-else  :is="Component"></component>
    </router-view>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import  { useRoute } from 'vue-router'

    export default defineComponent({
        name: "router-transition",
        props:{
            notNeedKey:{
                type:Boolean,
                default:false
            },
            animate:{
                type:Boolean,
                default:true
            }
        },
        setup(){
            const route = useRoute();

            return {
                route
            }
        }
    })
</script>

<style scoped>

</style>